<template>
    <div>
        <el-row>
            <el-col :span="16" :offset="4">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="float: left;">我的报工</span>
                        <div  style="float: right; padding: 3px 0">
                            <el-button type="primary" @click="dailyReport">每日报工</el-button>
                            <el-button type="primary" @click="checkLostReport">漏报记录</el-button>
                            <el-button type="primary" @click="goToPersonalReport">报工记录</el-button>
                        </div>
                    </div>
                    <div class="text item" v-if="myReportList != null && myReportList.length > 0">
                        {{myReportList[0]}}&nbsp;&nbsp;漏报记录&nbsp;&nbsp;
                        <el-link type="primary" @click="supplementReport">立即补报</el-link>
                    </div>
                    <div v-if="myNotSubmitList != null && myNotSubmitList.length > 0" class="text item">
                        {{myNotSubmitList[0].reportdate}}&nbsp;&nbsp;报工退回&nbsp;&nbsp;
                        <el-link type="primary" @click="resubmitReport(myNotSubmitList[0])">重新报工</el-link>
                    </div>
                    <div v-else class="text item">暂无退回信息</div>
                </el-card>
                <br>
                <el-card class="box-card" v-if="role.includes(3)">
                    <div slot="header" class="clearfix">
                        <span style="float: left;">我的审批</span>
                        <div  style="float: right; padding: 3px 0">
                            <el-button type="primary" @click="goToDeptReport">部门记录</el-button>
                            <el-button type="primary" @click="goToCheckReport">审核列表</el-button>
                            <el-button type="primary" @click="checkAllLostReport">漏报记录</el-button>
                            <el-button type="primary" @click="gotoMonthView">月度总览</el-button>
                        </div>
                    </div>
                    
                    <!-- 修改后的审批信息显示 -->
                    <div v-if="myCheckList && myCheckList.length > 0">
                        <div v-for="(item, index) in displayCheckList" :key="index" class="text item">
                            {{item.reportdate}}&nbsp;&nbsp;存在未审核报工&nbsp;&nbsp;
                            <el-link type="primary" @click="goToCheckReport">前往审核</el-link>
                        </div>
                    </div>
                    <div v-else class="text item">
                        暂无未审核报工信息
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 报工表单弹窗 -->
        <report-form
            :visible.sync="formVisible"
            :form-type="formType"
            :report-data="currentReportData"
            :lost-date="lostDate"
            @close="handleFormClose"
        />
    </div>
</template>

<script>
import ReportForm from '../../components/ReportForm.vue'

export default {
    name: 'reportMenu',
    components: {
        ReportForm
    },
    data() {
        return {
            formVisible: false,
            formType: 'new',
            currentReportData: {},
            role: [],
            myReportList: [],
            myCheckList: [],
            myNotSubmitList: [],
            lostDate: '',
            empno: null,
            query: {
                page: '1',
                limit: '10',
                empno: null,
                deptno: 1,
                ename: null,
                state: null,
                date: null
            }
        }
    },
    computed: {
        // 计算属性：显示至多三天的未审核信息
        displayCheckList() {
            if (!this.myCheckList || this.myCheckList.length === 0) {
                return []
            }
            
            // 去重并排序，确保显示最新的三天
            const uniqueDates = [...new Set(this.myCheckList.map(item => item.reportdate))]
                .sort((a, b) => new Date(b) - new Date(a)) // 按日期倒序
                .slice(0, 3) // 取前三天
            
            return uniqueDates.map(date => {
                return {
                    reportdate: date,
                    count: this.myCheckList.filter(item => item.reportdate === date).length
                }
            })
        }
    },
    methods: {
        parseRoleIds(roleIdsStr) {
            if (!roleIdsStr) return []
            return roleIdsStr.split(',').map(id => Number(id)).filter(id => !isNaN(id))
        },

        // 个人填报
        dailyReport(){
            this.$http.get('/isReport?empno=' + parseInt(this.empno)).then(res => {
                if(res.data === false){
                    this.formType = 'new'
                    this.currentReportData = {}
                    this.formVisible = true
                }else{
                    this.$message.warning('今日已填报')
                }
            }).catch(() => {
                this.$message.warning('系统异常')
            })
            
        },
        
        // 立即补报
        supplementReport(){
            this.formType = 'supplement'
            this.currentReportData = {}
            this.lostDate = this.myReportList[0];
            this.formVisible = true;
        },
        
        // 重新报工
        resubmitReport(){
            this.formType = 'resubmit'
            this.currentReportData = this.myNotSubmitList[0]
            this.formVisible = true
        },

        // 跳转到个人报工页面
        goToPersonalReport() {
            this.$router.push({
                path: '/personalReport',
                query: {
                    listForm: 'personal'
                }
            })
        },

        goToDeptReport() {
            this.$router.push({
                path: '/personalReport',
                query: {
                    listForm: 'dept'
                }
            })
        },

        goToCheckReport() {
            this.$router.push({
                path: '/personalReport',
                query: {                    
                    listForm: 'check'
                }
            })
        },

        gotoMonthView() {
            this.$router.push('/monthView')
        },
        
        // 获取报工详情
        getReportDetail() {
            var reportid = this.myNotSubmitList[0].reportid
            this.$http.post('/getOneReport',reportid).then(res => {
                this.currentReportData = res.data
            }).catch(() => {
                this.$message.warning('系统异常')
            })
        },
        
        handleFormClose() {
            this.formVisible = false
            this.currentReportData = {}
            this.getNotSubmitList()
            this.getCheckList()
            this.getLostDate()
        },
        
        getLostDate(){
            this.$http.post('/getLostDate',this.query).then(res=>{
                this.myReportList = res.data.data
            }).catch(()=>{
                this.$message.warning('系统异常')
            })
        },

        getNotSubmitList(){
            this.$http.post('/getReturnReport',this.query).then(res=>{
                this.myNotSubmitList = res.data.data
            }).catch(()=>{
                this.$message.warning('系统异常')
            })
        },

        getCheckList(){
            this.$http.post('/getCheckReport',this.query).then(res=>{
                this.myCheckList = res.data.data
            }).catch(()=>{
                this.$message.warning('系统异常')
            })
        },

        checkLostReport(){
            this.$router.push({
                path: '/lostReportList',
                query: {
                    listForm: 'personal'
                }
            });
        },

        checkAllLostReport(){
            this.$router.push({
                path: '/lostReportList',
                query: {
                    listForm: 'check'
                }
            });
        }
    },
    created() {
        this.empno = localStorage.getItem("empno")
        this.role = this.parseRoleIds(localStorage.getItem("roleid"))
        this.query.empno = localStorage.getItem("empno")
        this.query.deptno = localStorage.getItem("deptno")
        this.getLostDate()
        this.getNotSubmitList()
        this.getCheckList()
    }
}
</script>

<style>
    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: ""
    }
    .clearfix:after {
        clear: both
    }
</style>